import React, { useState, useEffect,useMemo } from 'react'
import { useNavigate } from 'react-router-dom'
import Title from './component/Title'
import Flushed from '../../Monitoring_analytics/Operate_monitor/Component/Flushed';

import { Table, Tooltip, Space, Button, Flex } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';
import { getorder } from '../../../request/api'

export default function Order_management() {
  useEffect(() => {
    allorder()
  }, [])
  const navigate = useNavigate()

  // 获取全部的用户信息
  let [orderdata, setdata] = useState([])
  const allorder: any = async () => {
    const data: any = await getorder({})
    console.log(data);
    
    setdata(data.data)
  }

  // 获取子组件传递的搜索完后的数据信息，更新用户信息
  const getTitle = (item: any) => {
    console.log(item);
    setdata(item)
  }

  let [type, settype] = useState('全部')
  // 根据type筛选数据
  const gettype = useMemo(() => {
    if (type === '全部') {
      return orderdata
    }else if(type ==='1'){
      return orderdata.filter((item: any) => item.state === 1)
    }else if(type ==='2'){
      return orderdata.filter((item: any) => item.state === 2)
    }else if(type ==='3'){
      return orderdata.filter((item: any) => item.state === 3)
    }
  }, [type, orderdata])



  type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];
  const columns: TableColumnsType = [
    { title: '下单时间', dataIndex: 'xiadan_time'},
    { title: '所属团长', dataIndex: 'suoshu_tuanzhang'},
    { title: '下单人', dataIndex: 'xiadanren'},
    { title: '收货人', dataIndex: 'xiadanren'},
    { title: '联系方式', dataIndex: 'phone'},
    { title: '商品数量', dataIndex: 'shopnum' },
    { title: '实付金额', dataIndex: 'shifu_money'},
    { title: '订单类型', dataIndex: 'Order_type'},
    {
      title: '操作',
      key: '_id',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => {
            if(selectedRowKeys.length ==0){
              alert('请选择订单')
            }else if(selectedRowKeys.length > 1){
             alert('只能选择一个订单') 
            }else{
              navigate(`/home/Order/Details?_id=${selectedRowKeys}`)
            }
          }}>查看 </a>
        </Space>
      ),
    },
  ];




  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  // 数据渲染
  const dataSource = gettype.map((item) => ({
    key: item._id,
    suoshu_tuanzhang:item.groupid.name, // 所属团长
    xiadan_time:item.buy_time, // 下单时间
    xiadanren:item.userid.name, //下单人
    phone:item.userid.phone, // 联系方式
    shopnum:item.shopnum, // 商品数量
    shifu_money:item.goodsid.price*item.goodsid.discount, // 实付金额
    Order_type:item.state==1?'普通订单':'秒杀订单'
  }));


  // 选择项
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection: TableRowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const hasSelected = selectedRowKeys.length > 0;




  const [componentSize, setComponentSize] = useState<SizeType | 'default'>('default');
  const onFormLayoutChange = ({ size }: { size: SizeType }) => {
    setComponentSize(size);
  };




  return (
    <div>
      <Title name='订单管理' getTitle={getTitle}></Title>
      <Flushed></Flushed>
      <div style={{ width: '100%', backgroundColor: 'white', padding: '0.5rem', marginTop: '0.5rem' }}>
        <Flex gap="middle" vertical>
          <Flex align="center" gap="middle">
            <a onClick={()=>{
              settype('全部')
            }} style={{color:type==='全部'?'red':''}}>全部</a>
            <a onClick={()=>{
              settype('2')
            }} style={{color:type==='秒杀'?'red':''}}>秒杀</a>
            <a onClick={()=>{
              settype('3')
            }} style={{color:type==='拼团'?'red':''}}>拼团</a>
            <a onClick={()=>{
              settype('1')
            }} style={{color:type==='1'?'red':''}}>普通订单</a>
          </Flex>
          <Table rowSelection={rowSelection} columns={columns} dataSource={dataSource} />
        </Flex>
      </div>
    </div>
  )
}
